<template>
   <page-model
  :title="pageName"
  >
      <div class="navSearch  flex-start mt-20">
        <section class="flex-start" >
          <p class="selectItem">选择部门</p>
          <el-select v-model="userSearchDTO.departId" clearable>
            <el-option  :label="'全部'" :value="''" @click.native="getDataList()"></el-option>
            <el-option
              v-for="(item,index) in departList"
              :key="index"
              :label="item.webDeptName"
              :value="item.webDeptId"
              @click.native="getDataList()"
            ></el-option>
          </el-select>
        </section>
        <section class="flex-start ml-60" >
          <p class="selectItem">账号状态</p>
          <el-select v-model="userSearchDTO.status" clearable>
            <el-option
              v-for="(item,index) in statusList"
              :key="index"
              :label="item.label"
              :value="item.value"
              @click.native="getDataList()"
            ></el-option>
          </el-select>
        </section>
        <section class="flex-start ml-60">
          <p class="selectItem">姓名搜索</p>
          <el-input v-model.trim="userSearchDTO.name" clearable ></el-input>
          <div class="search flex-center" @click="getDataList()">查询</div>
          <div class="reset flex-center" @click="reset">重置</div>
        </section>
      </div>
    <div class="mainBox">
      <header>
        <div class="uploadData" @click="addRole">添加</div>
      </header>
      <table class="mainTable" border="0" cellspacing="0" cellpadding="0">
        <thead>
          <th>序号</th>
          <th>姓名</th>
          <th>部门</th>
          <th>职位</th>
          <th>手机号</th>
          <th>角色</th>
          <th>账号状态</th>
          <th>注册时间</th>
          <th>操作</th>
        </thead>
        <tbody v-if="tableData.length">
          <tr v-for="(item, index) in tableData" :key="item.learnId">
            <td>{{index>= 9 ? index+1 : '0'+ (index + 1)}}</td>
            <td>{{ item.name }}</td>
            <td>{{item.departName}}</td>
            <td>{{item.position?item.position:'无'}}</td>
            <td>{{item.mobile}}</td>
            <td>{{item.roleName}}</td>
            <td :style="{color:item.status?'#2EBB25':'#666666'}">{{item.status?'启用':'禁用'}}</td>
            <td>{{item.createTime}}</td>
            <td>
              <span @click="writeDoc(item)">编辑</span>
              <span @click="disAbled(item)">{{item.status?'禁用':'启用'}}</span>
              <span @click="deleteDoc(item)">删除</span>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="block" v-if="count">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="index"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="count"
        ></el-pagination>
      </div>
      <!-- 当表头为空时 -->
      <div class="empty" v-if="!count">
        <img src="@/assets/scene/empty.png" alt class="emptyLogo" />
        <span>空空如也</span>
      </div>
    </div>
  <delete-alert-box
  v-if="isDelete"
  :isDelete=isDelete
  :descTips=descTips
  @Confirm=Confirm
  @Cancel=Cancel
  ></delete-alert-box>
  </page-model>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      pageName: '项目员工管理',
      itemsList: [],
      index: 1,
      pageSize: 10,
      statusList: [{
        label: '启用',
        value: 1
      },
      {
        label: '禁用',
        value: 0
      }],
      userSearchDTO: {
        departId: '',
        status: '',
        name: ''
      },
      descTips: [],
      isDelete: false,
      userIds: []
    }
  },
  computed: {
    ...mapState('projectRoleManage', [
      'tableData',
      'count',
      'departList'
    ])
  },
  methods: {
    handleCurrentChange (val) {
      // // console.log(val)
      this.index = val
      this.getDataList()
    },
    // 获取表格数据
    getDepartList () {
      this.$store.dispatch('projectRoleManage/updateDepartList')
    },
    // 获取表格数据
    getDataList () {
      const params = {
        projectId: localStorage.getItem('projectId'),
        ...this.userSearchDTO,
        pageSize: this.pageSize,
        index: this.index
      }
      this.$store.dispatch('projectRoleManage/updateTable', params)
    },
    // 禁用/启用
    disAbled (item) {
      // console.log('禁用/启用')
      this.userIds.push(item.userId)
      const params = {
        userIdsDTO: {
          userIds: this.userIds
        },
        status: item.status === 1 ? 0 : 1
      }
      this.$store.dispatch('projectRoleManage/disableRoleList', params).then(res => {
        // console.log(res)
        if (res.data.code === 200) {
          this.getDataList()
          this.userIds = []
        }
      })
    },
    // 编辑文档
    writeDoc (item) {
      sessionStorage.setItem('userId', item.userId)
      this.$router.push('/innerAddRole')
    },
    // 删除文档
    deleteDoc (item) {
      this.isDelete = true
      this.userIds.push(item.userId)
      this.descTips = [{
        tips: `确定删除"${item.name}"这个员工吗？`,
        subTips: '删除之后，员工相关信息也会被删除。',
        default: ''
      }]
    },
    Confirm () {
      // console.log('确定')
      const params = {
        userIds: this.userIds
      }
      this.$store.dispatch('projectRoleManage/deleteRoleItem', { userIdsDTO: params }).then(res => {
        // console.log(res)
        if (res.data.code === 200) {
          this.isDelete = false
          this.getDataList()
          this.userIds = []
        }
      })
    },
    Cancel () {
      this.isDelete = false
      // console.log('取消')
    },

    // 重置文档
    reset () {
      this.userSearchDTO = {
        departId: '',
        status: '',
        name: ''
      }
      this.getDataList()
    },
    addRole () {
      sessionStorage.removeItem('userId')
      this.$router.push('/innerAddRole')
    }
  },
  created () {
    this.getDepartList()
    this.getDataList()
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/dataModule.scss";
    .mainBox{
    min-height: calc(100% - 198px);
  }
  .navSearch{
    height:84px;
    background:rgba(255,255,255,1);
    border-radius:5px;
    section{
      ::v-deep .el-input{
        width: unset;
      }
      ::v-deep .el-input__inner{
        width: 240px;
      }
      .selectItem{
        padding-left:24px;
        padding-right: 12px;
        white-space: nowrap;
        font-size:14px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(102,102,102,1);
      }
      .search{
        cursor: pointer;
        width:84px;
        font-size:14px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(255,255,255,1);
        height:36px;
        background:rgba(72,104,255,1);
        border-radius:18px;
        margin-left: 40px;
      }
      .reset{
        cursor: pointer;
        width:84px;
        height:36px;
        border-radius:18px;
        border:1px solid rgba(72,104,255,1);
        font-size:14px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(72,104,255,1);
        margin-left: 15px;
      }
    }
  }
</style>
